<template>
    <div class="app-container">
        <div class="filter-container" ref="searchForm" v-if="false">
            <el-form :inline="true" :model="formData" class="search-form-inline" size="small">
                <el-form-item label="终端客户名称">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-select v-model="formData.name" placeholder="请选择">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-cascader
                        :options="options"
                        change-on-select
                        @active-item-change=""
                    >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="申请开户时间">
                    <el-date-picker
                        v-model="formData.times"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-button type="primary" size="small" @click="getList(1)">搜索</el-button>
            </el-form>
        </div>
        <search-form :searchArray="searchArray"></search-form>
        <elTable ref="t" :enterSearch="true" :formData="formData" @tableData="getList">
            <el-table-column label="终端客户名称" prop="name" :show-overflow-tooltip="true" align="center">
                <template slot-scope="{row}">
                    <el-button type="text" @click="openDialogClient(row)">{{row.name}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="用户名" prop="name" :show-overflow-tooltip="true" align="center"></el-table-column>
            <el-table-column label="手机号" prop="name" :show-overflow-tooltip="true" align="center"></el-table-column>
            <el-table-column label="收货区域" prop="name" :show-overflow-tooltip="true" align="center"></el-table-column>
            <el-table-column label="开户情况" prop="name" :show-overflow-tooltip="true" align="center"></el-table-column>
            <el-table-column label="申请开户时间" prop="name" :show-overflow-tooltip="true" align="center"></el-table-column>
            <el-table-column label="备注" prop="name" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                    <el-button type="text">添加备注</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" :disabled="row.status === '1'" @click="gotoAudit(row)">审核</el-button>
                    <el-button type="danger" size="mini" :disabled="row.status === '1'" @click="gotoCheck(row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column label="优惠操作" align="center" width="100" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="{row}">
                    <el-dropdown>
                        <span class="el-dropdown-link">优惠操作<i class="el-icon-arrow-down el-icon--right"></i></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="giveRedPacket(row)">赠送红包</el-dropdown-item>
                            <el-dropdown-item @click.native="viewRedPacket(row)">查看红包</el-dropdown-item>
                            <el-dropdown-item @click.native="giveCoupon(row)">赠送优惠券</el-dropdown-item>
                            <el-dropdown-item @click.native="viewCoupon(row)">查看优惠券</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </elTable>
        <!--终端客户弹框-->
        <dialogClient ref="dialogClient"></dialogClient>
        <!--红包-->
        <dialogRedPacket ref="dialogRedPacket"></dialogRedPacket>
        <!--优惠券-->
        <dialogCoupon ref="dialogCoupon"></dialogCoupon>
    </div>
</template>

<script>
    import apisAccount from '@/api/accounts/accountLibrary' //api
    import elTable from "@/components/xForm/elTable" //表格组件
    import dialogClient from './dialogClient' //终端客户点击弹框
    import dialogRedPacket from './dialogRedPacket' //红包
    import dialogCoupon from './dialogCoupon' //优惠券
    export default {
        name: 'accountLists',
        components: { elTable, dialogClient, dialogRedPacket, dialogCoupon },
        data() {
            return {
                searchArray: [
                    {
                        type:'input',
                        placeholder: '请输入终端客户名称',
                        value: '',
                        label: '终端客户名称',
                    },
                    {
                        type:'input',
                        placeholder: '请输入手机号',
                        value: '',
                        label: '手机号',
                    },
                    {
                        type:'input',
                        placeholder: '请输入用户名',
                        value: '',
                        label: '用户名',
                    },
                    {
                        type: "select",
                        placeholder: "请选择审核状态",
                        filterable: false,
                        value: "",
                        width: '',
                        label: '审核状态',
                        list: [
                        {
                            label: "",
                            value: ""
                        }
                        ]
                    },
                    {
                        type: "select",
                        placeholder: "请选择收货地址",
                        filterable: false,
                        value: "",
                        width: '',
                        label: '收货地址',
                        list: [
                        {
                            label: "",
                            value: ""
                        }
                        ]
                    },
                    {
                        type: "datePicker",
                        startText: "开始日期",
                        endText: "结束日期",
                        value: "",
                        types: "daterange",
                        rangeSpeparator: "至",
                        label: '申请开户时间'
                    },
                ],
                formData: {
                    name: '1',
                    times: '',
                    currentPage: 1,
                    pageSize: 10
                },
                options: [{
                    value: '1',
                    label: '浙江',
                    children: [{
                        value: '2',
                        label: '杭州'
                    }]
                }],
                options2: [{
                    value: 1, label: '合格'
                },{
                    value: 2, label: '不合格'
                },{
                    value: 3, label: '通过'
                }],
                operationQuery: {
                    id: '',
                    remark: ''
                }
            }
        },
        methods: {
            getList(pageNo) {
                this.formData.currentPage = pageNo || this.formData.currentPage
                let dataInfo = [{
                    id: 1,
                    name: '茶百道大药房1',
                    delivery: true
                },{
                    id: 2,
                    name: '茶百道大药房2',
                    delivery: true
                },{
                    id: 3,
                    name: '茶百道大药房3',
                    delivery: false
                }]
                let total = 13
                this.$nextTick(()=>{
                    this.$refs.t.loadData(dataInfo, total)
                })
            },
            /*审核*/
            gotoAudit(row) {
                this.$router.push({ path: ['/accounts/accountAudit',row.id,'审核:'+row.name].join('/') })
            },
            /*查看*/
            gotoCheck(row) {
                this.$router.push({ path: ['/accounts/accountCheck',row.id,'查看:'+row.name].join('/') })
            },
            /*查看终端客户*/
            openDialogClient(row) {
                this.$refs.dialogClient.open(row)
            },
            /*赠送红包*/
            giveRedPacket(row) {
                this.$refs.dialogRedPacket.open(row)
            },
            /*赠送优惠券*/
            giveCoupon(row) {
                this.$refs.dialogCoupon.open(row)
            },
            /*查看红包*/
            viewRedPacket(row) {
                this.$router.push({ path: ['/accounts/viewRedPacket',row.id,'查看红包:'+row.name].join('/') })
            },
            /*查看优惠券*/
            viewCoupon(row) {
                this.$router.push({ path: ['/accounts/viewCoupon',row.id,'查看优惠券:'+row.name].join('/') })
            },
        }
    }
</script>

<style scoped lang="scss">
.app-container {
    .search-form {
        margin-bottom: 16px;
    }
}
</style>
